<!--suppress ALL -->
<template>
  <div class="page" data-page="comvdList" style="z-index: 2;">
    <div class="link-page-nav">
      <a href="#" class="link" @click="$root.backToTab()">
        <i class="iconfont icon-zuo"></i>
      </a>
    </div>
    <div class="link-page-top" style="padding-bottom: 17px;">
      <div class="link-page-list-title">视频列表</div>
    </div>
    <div class="page-content">
      <div class="list search-list media-list searchbar-found video-list no-hairlines">
        <ul id="vedio_list"></ul>
      </div>
    </div>
  </div>
</template>

<style scoped>
  .video-list {
    margin: 0px;
  }

  .videoli {
    width: 100%;
    height: 240px;
  }

  .div_img {
    position: absolute;
    z-index: 1;
    height: 186px;
  }

  .vedioImg {
    width: 92%;
    margin-left: 4%;
    height: 186px;
    margin-top: 12px;
  }

  .div_name {
    padding-left: 15px;
    width: 75%;
    float: left;
  }

  .status_div {
    position: absolute;
    top: 0;
    z-index: 3;
    width: 92%;
    margin-left: 4%;
    height: 186px;
    margin-top: 12px;
  }

  .div_status {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .img_status {
    padding-top: 68px;
  }

  .my_div {
    width: 100%;
    height: 186px;
    padding-top: 12px;
  }

  .img_opacity {
    opacity: 0.6;
  }
</style>
<script>
  return {
    mounted() {
      var self = this;
    },
    data: function () {
      return {

      }
    },
    methods: {
      getMoreData: function () {
        var self = this;
        var $ = self.$$;
        var relateObjId = self.$route.params.relateObjId;
        common.loading(1);
        Dao.getControlRoomInfo({
          orgId: relateObjId
        }, function (data) {
          common.loading(0);
          if (data && data.length > 0) {
            self.showUnitList(data);
          } else {
            //暂无数据
            $("#vedio_list").append(`<div class="no-data-img"><img src="` + listNoDataPic() + `"/></div> `);
          }
        });
      },
      //显示视频列表
      showUnitList: function (data) {
        var self = this;
        $("#vedio_list").empty();
        for (var i = 0; i < data.length; i++) {
          var status = "";
          if (data[i].video.isOnline == 1) {
              status = staticPath + "img/vedio/play.png"
          }
          if (data[i].video.isOnline == 0) {
              status = staticPath + "img/vedio/line.png";
          }
          $("#vedio_list").append(`
          <li class="videoli" id=videoli`+ common.transNullundefined(data[i].video.id) +`>
                  <div class="each-vedio-contain">
                      <div class="each-vedio-pic" style="position: relative;">
                          <div  id= status_offline_`+common.transNullundefined(data[i].video.id)+` style="background-color:rgba(0, 0, 0, 0.5);position:absolute;top:12px;left:12px;width:calc(100% - 28px);height:186px;">
                              <p style="top:0;left:0;width:100%;height:100%;color:#ffffff;position:absolute;font-size: 12px;display: flex;justify-content: center;align-items: center;">视频离线</p>
                          </div>
                          <img class="vedioImg" id=img_`+common.transNullundefined(data[i].video.id)+` src=`+picVedioNo(data[i].video.picUrl)+`
                          onerror="this.onerror=null; this.src='`+picVedioNo()+`'">
                          <div class="status_div" id= status_`+common.transNullundefined(data[i].video.id)+`>
                              <img class="div_status" src=`+ status +`>
                          </div>
                      </div>
                      <div class="each-vedio-name" style="padding-left:10px">
                          <div>`+common.transNullundefined(data[i].video.name)+`</div>
                      </div>
                  </div>
          </li>`);
          if (data[i].video.isOnline && data[i].video.isOnline == 1) {
              // 在线
              $('#status_'+data[i].video.id).show();
              $('#status_offline_'+data[i].video.id).hide();
          }else{
              // 离线
              $('#status_'+data[i].video.id).hide();
              $('#status_offline_'+data[i].video.id).show();
          }
          if (data[i].isOnline == 0) {
              $('#img_' + data[i].video.id).addClass("img_opacity");
          }
          //视频播放
          jQuery('#videoli' + common.transNullundefined(data[i].video.id)).on("click", {'data': data[i]}, function (e) {
            if(getClickEnabel(2000)){//点击视频列表间隔
                var bean = e.data.data;
                playCurrentVedio(bean.video);
            }
          });
        }
      }
    },
    on: {
      pageInit: function (e, page) {
        var self = this;
        self.pageIndex = 0;
        self.getMoreData();
      },
    }
  }
</script>